<template>
  <van-nav-bar left-arrow @click-left="back" />
  <div class="login_main">
    <h1>找回密码</h1>
    <p>
      请输入邮箱的验证码，进行验证~
      <router-link to="/findpassword"> 短信找回密码</router-link>
    </p>
    <van-field
      v-model="email"
      label="邮箱"
      placeholder="请输入邮箱号"
      required
    />
    <van-field
      v-model="password"
      label="新密码"
      placeholder="输入新密码"
      required
    />
    <van-cell-group inset>
      <van-field v-model="code" center clearable placeholder="请输入邮箱验证码">
        <template #button>
          <van-button
            size="small"
            type="primary"
            plain
            @click="sendCode"
            :disabled="downTime != 301"
            >{{ downTime == 301 ? "发送验证码" : downTime + "s" }}</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
    <van-button
      type="warning"
      round
      block
      style="margin: 10px 0; color: #fff"
      @click="findpassword"
      >找回密码</van-button
    >
  </div>
</template>
        
  <script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import countdown from "../../components/countdown";
import { EmailUpdatePasswordAPI, sendEmailAPI } from "../../request";
const router = useRouter();
const email = ref("");
const code = ref("");
const rightCode = ref("");
const password = ref("");
const downTime = ref(301);
const back = () => {
  router.back();
};
const findpassword = async () => {
  if (password.value == "" || password.value.length < 6) {
    showFailToast("密码格式不正确");
    return;
  }
  if (email.value.indexOf("@") == -1) {
    showFailToast("邮箱不正确");
    return;
  }
  if(code.value==''||code.value!=rightCode.value||rightCode.value==''){
    showFailToast("验证码不正确");
    return;
  }
  let { data } = await EmailUpdatePasswordAPI({
    email: email.value,
    password: password.value,
  });
  if (data.code == 200) {
    router.push("/passwordlogin");
  }else{
    router.push("/login");
  }
  showSuccessToast(data.msg || "修改成功");
};
const sendCode = async () => {
  if (email.value.indexOf("@") == -1) {
    showFailToast("邮箱不正确");
    return;
  }
  countdown(downTime, downTime.value);
  let { data } = await sendEmailAPI({ email: email.value });
  rightCode.value = data.data;
  showSuccessToast(data.msg || "发送成功");
};
</script>
      
        
  <style scoped lang='less'>
.login_main {
  padding: 10px 30px;
  box-sizing: border-box;
  p {
    font-size: 13px;
    margin: 10px 0 40px;
  }
  .pupop_icon {
    position: fixed;
    bottom: 15%;
  }
  .pupop_agreement {
    position: fixed;
    bottom: 7%;
  }
  .van-field {
    margin: 10px 0;
    border: 1px solid #fc694f;
    border-radius: 1.5em;
    box-shadow: 0 10px 2px #eee;
  }
  > .van-button {
    border: 1px solid #fc694f;
    border-radius: 1.5em;
    box-shadow: 0 10px 15px #999;
  }
  .van-cell-group {
    margin: 0;
  }
}
.orange {
  color: #fc694f;
}
.agreement {
  width: 80%;
  margin: 0 auto;
}
.pupop_icon {
  width: 80%;
  margin: 15px auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
</style>